<template>
  <div class="home-page-card card">
    <div class="top">
      <div class="top-avator">
        <img :src="blog.imgSrc" alt="" width="100%" height="100%">
      </div>
      <div class="top-info">
        <div class="top-info-author f2-zlz">
          {{ blog.author }}
        </div>
        <div class="top-info-info f1">
          <span class="top-info-info-item">{{ blog.lastUpdateTime }}</span>
          <span class="top-info-info-item">字数：{{ blog.numbers }}</span>
          <span class="top-info-info-item">阅读：{{ blog.read }}</span>
          <span class="top-info-info-item">评论：40</span>
          <span class="top-info-info-item">点赞：{{ blog.like }}</span>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-body">
        <div class="middle-body-title f2">
          {{ blog.title }}
        </div>
        <div class="middle-body-digest f1">
          {{ blog.desc }}
        </div>
        <div class="middle-body-tag">
          <el-tag style="margin: 5px 10px 10px 0" v-for="tag in blog.tags" v-bind:key="tag.id" size="mini" effect="plain" type="info">
            {{ tag.name }}
          </el-tag>
        </div>
      </div>
      <div class="middle-image">
        <div class="middle-image-img" :style="'background-image: url('+blog.imgSrc+');'"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogCardStyle1",
  props: {
    blog: {
      type: Object
    }
  }
}
</script>

<style scoped lang="scss">
.home-page-card {
  color: #57606f;
  letter-spacing: 1px;
  padding: 10px 100px;
  width: 78%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.top {
  height: 60px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(112,161,255,0.3);

  &-avator {
    vertical-align: top;
    background-color: #dbb8b8;
    display: inline-block;
    width: 60px;
    height: 100%;
    border-radius: 60px;
    overflow: hidden;
  }

  &-info {
    display: inline-block;
    height: 100%;
    width: calc(100% - 60px);

    &-author {
      padding-left: 15px;
      height: 65%;
      line-height: 49px;
    }

    &-info {
      height: 35%;
      padding-left: 10px;
      color: rgba(0, 0, 0, 0.5);

      &-item {
        bottom: 0;
        margin: 5px;
      }
    }
  }
}

.middle {
  margin-top: 20px;

  &-body {
    vertical-align: top;
    width: 70%;
    display: inline-block;
    position: relative;
    &-title {
      font-weight: bolder;
      cursor: pointer;
      transition: all 0.3s;
    }
    &-title:hover{
      text-decoration: underline;
    }

    &-digest {
      margin: 10px 0;
      line-height: 23px;
      overflow-y: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    &-tag {
      font-weight: bolder;
      cursor: pointer;
    }

  }

  &-image {
    display: inline-block;
    height: 120px;
    width: 30%;
    overflow: hidden;
    position: relative;

    &-img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 10px;
      height: 100px;
      width: calc(100% - 20px);
      max-width: 160px;
      background-image: url("https://pic1.zhimg.com/80/v2-ad826d1a5af654742a41246805ce7b7d_1440w.jpeg");
      background-size: 100% 100%;
      transition: all 0.3s;
    }

    &-img:hover{
      background-size: 120% 120%;
      background-position: -10px -12px;
    }
  }
}
</style>